<template>
  <div class="index_header">
    <div class="left">
      <span class="hms-style">{{ hms }} </span>
      <section>
        <div>{{ moment().format("dddd") }}</div>
        <div>{{ moment().format("LL") }}</div>
      </section>
    </div>
    <div class="center">{{ name }}</div>
    <div class="right"></div>
  </div>
</template>
  
  <script>
import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      hms: this.moment().format("LTS"),

      name: this.$route.meta.title,
      timer: null,
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    ...mapMutations(["changeTheme"]),

    changeTime() {
      this.timer = setInterval(() => {
        this.hms = this.moment().format("LTS");
      }, 1000);
    },
  },
  mounted() {
    this.changeTime();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>
  
  <style lang="scss" scoped>
// 组件整体
.index_header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  color: rgba($color: #fff, $alpha: 0.8);
  // border-bottom: 1px solid #02467b;
  background: url("../../assets/images/topbg@2x.png") center center no-repeat;
  background-size: contain;
  .left {
    padding: 10px;
    display: flex;
    .hms-style {
      font-weight: 700;
      font-size: 1.75rem;
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
    section {
      text-align: left;
    }
  }
  .center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -70%);
    background: linear-gradient(to bottom, #ffffff, #92d7ff);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 1.5rem;
  }
}
::v-deep {
  .el-radio-button__inner {
    border-radius: 0px !important;
  }
}
</style>
  